<template>
  <div class="app d-flex fl-col jc-between">

   <div class="bg">
      <div class="header mt-1 text-white fs-16 p-3  mb-2  d-flex ai-center jc-between">
        <span>在线考试 </span>
        <span>{{username}}</span>
        </div>
     <div class="swiper">
        <el-carousel  height="180px">
      <el-carousel-item>
       <img
            src="../../assets/img/1.webp"
          />
      </el-carousel-item>
      <el-carousel-item>
       <img
            src="../../assets/img/2.webp"
          />
      </el-carousel-item>
      <el-carousel-item>
       <img
            src="../../assets/img/3.webp"
          />
      </el-carousel-item>
    </el-carousel>
     </div>
   </div>
      <div class="main flex-1 p-2 fs-16 ">
      <div class="main-header d-flex jc-between ai-center mb-4">
        <div>示例考试</div>
  
        <div>
          <router-link tag="div"  to="/search">
            <span class="iconfont icon-fenlei mr-1"></span>
          <span>查看全部</span>
          </router-link>
        </div>
      </div>
      <div class="searchtip">
        <span>找不到嘛，试试点击这里</span>
        <span class="iconfont icon-tishijiantou"></span>
      </div>
      <div class="main-contain">
        <router-link tag="div" :to="{path: `/test/${item._id}`,
         query:{pic: item.pic ,icon: item.icon, title: item.title, name: item.name, instructions: item.instructions}}"
          class="main-item mb-3" v-for="(item,i) in home" :key="i" >
          <div class="main-list p-2 d-flex ">
         <div class="icon mr-2"><img :src="item.icon" alt=""></div>
         <div class="content p-2">
           <div class="title fs-16 mb-3">{{item.title}}</div>
           <div class="tip text-grey-1 mb-2 fs-14">{{item.instructions | filtersText}}</div>
           <div class="bywho">{{item.name}}</div>
         </div>
          </div>
        </router-link>
      </div>
      </div>
      <div class="botNav d-flex jc-around ai-center">
        <router-link tag="div" to="/main" class="tohome d-flex fl-col jc-center ai-center" >
          <span class="iconfont icon-home mb-1"></span>
          <span>首页</span>
        </router-link>
       <router-link tag="div" :to="`/user/${username}`"  class="touser d-flex fl-col jc-center ai-center">
          <span class="iconfont icon-user mb-1"></span>
          <span>个人中心</span>
        </router-link>
      </div>
    </div>

</template>

<script>
export default {
  data() {
    return {
      home:[],
      model: {

      },
      username: '',
    }
  },
    filters: {
    filtersText(val) {
      // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != "") {
        var reg = /[\u4e00-\u9fa5]/g;
        var names = val.match(reg);
        val = names.join("");
        return val.substr(0, 10); //获取富文本文字内容的前50个字符
      } else return "";
    },
    data(val) {
    return dayjs(val).format("20YY-MM-DD")
  }
  },
methods: {
  async fetch() {
    const res = await this.$http.get('/home')
    this.home = res.data
    this.username = window.sessionStorage.getItem('username')
  }
},
created() {
  this.fetch()
}
}
</script>

<style>
.router-link-active {
  color: #409EFF;
}
</style>